﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
        /*dropdown container. This is what we use to dropdown a list of formatblocks,font names,font-sizes etc*/
        table.dropdownlist-container
        {
            background: #FFFFFF;
            border: solid 1px #DCDCDC;
            padding: 4px;
        }
        tr.dropdownheader
        {
            color: #000;
            font-family: Calibri, Helvetica, Arial;
            font-size: 14px;
            height: 35px;
            font-weight: bold;
        }
        tr.dropdownheader td
        {
            background:red;
        }
        tr.dropdownheader td a
        {
            /*The close icon*/
            margin-right: 5px;
        }
        ul.dropdownlist
        {
            margin:2px;
            /*set an explicit height if you want scrollbars when overflow*/
        }
        /*mouseover hover state on items in the dropdownlists*/
        ul.dropdownlist a
        {
            text-decoration:none;
            padding:4px 2px 2px 2px;
        }
        /*style the img icon, if you specified iconUrl*/
        ul.dropdownlist a img
        {
            margin-right:5px;
            border-style:none;
        }
        /*mouseover hover state on items in the dropdownlists*/
        ul.dropdownlist a:hover
        {
	        background: #93d2f3;
	        text-decoration:underline;
        }
        /*when an item is selected in dropdownlist?*/
        li.dropdownlist-selected
        {
            background:#0092d2;
        }
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!-- need to add a reference to the Typps editor, meaning you need atleast once instance of the HTML editor for this to work. next version this will work standalone -->
<div><input type="text" value="Click to select.." id="target1" /></div>
<script type="text/javascript">
    var target1=$get('target1');
    function createDropDownList() {
        //First create the DOM element, either in HTML or 
        //dynamically in script as follows:
        var dropDownList1=$find('dropDownList1');
        if(dropDownList1==null) {
            var elem=document.createElement('div');
            elem.id='dropDownList1';
            document.body.appendChild(elem);
            var colors=['white','blue','gray','green','red'];
            //Next create your list
            var list=[];
            for(var index in colors) {
                var color=colors[index];
                var toolTip='select the color '+color;
                var iconUrl=String.format('Images/{0}.gif',color);
                list[index]={ text: color.toUpperCase(),value: color,toolTip: toolTip,iconUrl: iconUrl };
            }

            //Finally to create an instance of the DropDownList component, 
            //we use the $create function but first let’s create the options to pass to it as follows:
            var options=
            {
                dropDownClassName: 'dropdownlist-container',/*The element holding our list */
                listItemClassName: 'dropdownlist',/*The ul list holding each ListItem*/
                headerClassName: 'dropdownheader',/*The bar that contains the title and close button*/
                closeButtonClassName: 'tristateclosebutton16x48',
                selectedItemClassName: 'dropdownlist-selected',
                title: 'Pick your favorite color',/*The title to display in the dropDownList header*/
                targetControl: target1,/*The  element under which you want the dropdownlist positioned*/
                list: list
            };

            //Now pass it to the create function:
            dropDownList1=$create(Typps.DropDownList,options,null,null,elem);
            //now subscribe to the ListItemSelected event
            dropDownList1.add_listItemSelected(function (sender,args) {
                var value=args.get_selectedValue();
                var text=args.get_selectedText();
                target1.value=text;
            });
            dropDownList1.add_close(function (sender,args) {
                //don't have to do anything here, but just in case
            });
        }
        dropDownList1.show();
    }
</script>
</asp:Content>
